import axios, { AxiosError} from "axios";
import { ref, onMounted, reactive } from "vue";

export default function () {
    /* 
        声明一个reactive的<string>标准的数组
    */
    let doglist = reactive<string[]>([])


    /* 
        声明一个异步函数getDog
        内容是向服务器发起请求,获得我们需要的资源,并且设置一个返回值来接受它
        向我们的变量添加我们的图片,是获取的data中的message也就是一个图片网址.
        
        利用其生命周期,让其在我们这个hooks挂载后,运行一次函数.
    */
    async function getDog() {
        try {
            // 向我们的服务器发 起请求
            let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
            //向我们的图片列表中添加图片..

            doglist.push(result.data.message)

        } catch (error) {
            alert(error)
        }
        
    }
    onMounted(() => {
        getDog()
    })   

    return{doglist,getDog}
}